<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="./css/index.css">
	<style type="text/css">
		body{
			height: 8500px;
		}
	</style>
</head>
<body>
	<ul class="left_fix" id="left_fix">
		<li class="fix_list" id="fix_list">
			<a class="num" href="javascript:;" style="display:block">1F</a>
			<a class="word" href="javascript:;" style="display:none">服装</a>
		</li>
		<li class="fix_list">
			<a class="num" href="javascript:;">2F</a>
			<a class="word" href="javascript:;"  style="display:none">美妆</a>
		</li>
		<li class="fix_list">
			<a class="num" href="javascript:;">3F</a>
			<a class="word" href="javascript:;"  style="display:none">手机</a>
		</li>
		<li class="fix_list">
			<a class="num" href="javascript:;">4F</a>
			<a class="word" href="javascript:;"  style="display:none">家电</a>
		</li>
		<li class="fix_list">
			<a class="num" href="javascript:;">5F</a>
			<a class="word" href="javascript:;"  style="display:none">数码</a>
		</li>		
		<li class="fix_list">
			<a class="num" href="javascript:;">6F</a>
			<a class="word" href="javascript:;"  style="display:none">运动</a>
		</li>
		<li class="fix_list">
			<a class="num" href="javascript:;">7F</a>
			<a class="word" href="javascript:;"  style="display:none">居家</a>
		</li>
		<li class="fix_list">
			<a class="num" href="javascript:;">8F</a>
			<a class="word" href="javascript:;"  style="display:none">母婴</a>
		</li>
		<li class="fix_list">
			<a class="num" href="javascript:;">9F</a>
			<a class="word" href="javascript:;"  style="display:none">食品</a>
		</li>
		<li class="fix_list">
			<a class="num" href="javascript:;">10F</a>
			<a class="word" href="javascript:;"  style="display:none">图书</a>
		</li>
		<li class="fix_list">
			<a class="num" href="javascript:;">11F</a>
			<a class="word" href="javascript:;"  style="display:none">服务</a>
		</li>
		<li class="fix_list">
			<a class="num" href="javascript:;">12F</a>
			<a class="word" href="javascript:;"  style="display:none">生活</a>
		</li>
		<li class="fix_list">
			<a class="num" href="javascript:;">12F</a>
			<a class="word" href="javascript:;"  style="display:none">最后</a>
		</li>
	</ul>
	<script type="text/javascript">
		var left_fix = document.getElementById("left_fix");
		var fix_list = document.getElementsByClassName("fix_list");
		// 获得楼层的集合
		var num = document.getElementsByClassName("num");
		// 获得对应的楼层的文字的集合
		var word = document.getElementsByClassName("word");
		// 获得到UL的高度
		var ulHeight = parseInt( getComputedStyle(left_fix).height ); 
		
		window.onscroll = function(){
			var scrTop =  Math.max(document.documentElement.scrollTop,document.body.scrollTop);
			document.title  = scrTop; //文档标题显示滚动条的高度
			if( scrTop > 500  ){
				left_fix.style.display = "block";
			}
			if( scrTop >= 500 && scrTop < 1000 ){
				for( var i = 0 ; i<word.length ; i++ ){
					num[i].style.display = "block";
					word[i].style.display = "none";
				}
				num[0].style.display = "none";
				word[0].style.display = "block";

			}else if( scrTop < 1500  ){
				for( var i = 0 ; i<word.length ; i++ ){
					num[i].style.display = "block";
					word[i].style.display = "none";
				}
				num[1].style.display = "none";
				word[1].style.display = "block";

			}else if( scrTop < 2000  ){
				for( var i = 0 ; i<word.length ; i++ ){
					num[i].style.display = "block";
					word[i].style.display = "none";
				}
				num[2].style.display = "none";
				word[2].style.display = "block";

			}else if( scrTop < 2500  ){
				for( var i = 0 ; i<word.length ; i++ ){
					num[i].style.display = "block";
					word[i].style.display = "none";
				}
				num[3].style.display = "none";
				word[3].style.display = "block";

			}else if( scrTop < 3000  ){
				for( var i = 0 ; i<word.length ; i++ ){
					num[i].style.display = "block";
					word[i].style.display = "none";
				}
				num[4].style.display = "none";
				word[4].style.display = "block";

			}else if( scrTop < 3500  ){
				for( var i = 0 ; i<word.length ; i++ ){
					num[i].style.display = "block";
					word[i].style.display = "none";
				}
				num[5].style.display = "none";
				word[5].style.display = "block";

			}else if( scrTop < 4000  ){
				for( var i = 0 ; i<word.length ; i++ ){
					num[i].style.display = "block";
					word[i].style.display = "none";
				}
				num[6].style.display = "none";
				word[6].style.display = "block";

			}else if( scrTop < 4500  ){
				for( var i = 0 ; i<word.length ; i++ ){
					num[i].style.display = "block";
					word[i].style.display = "none";
				}
				num[7].style.display = "none";
				word[7].style.display = "block";

			}else if( scrTop < 5000  ){
				for( var i = 0 ; i<word.length ; i++ ){
					num[i].style.display = "block";
					word[i].style.display = "none";
				}
				num[8].style.display = "none";
				word[8].style.display = "block";

			}else if( scrTop < 5500  ){
				for( var i = 0 ; i<word.length ; i++ ){
					num[i].style.display = "block";
					word[i].style.display = "none";
				}
				num[9].style.display = "none";
				word[9].style.display = "block";

			}else if( scrTop < 6000  ){
				for( var i = 0 ; i<word.length ; i++ ){
					num[i].style.display = "block";
					word[i].style.display = "none";
				}
				num[10].style.display = "none";
				word[10].style.display = "block";

			}else if( scrTop < 6500  ){
				for( var i = 0 ; i<word.length ; i++ ){
					num[i].style.display = "block";
					word[i].style.display = "none";
				}
				num[11].style.display = "none";
				word[11].style.display = "block";

			}else if( scrTop < 7000  ){
				for( var i = 0 ; i<word.length ; i++ ){
					num[i].style.display = "block";
					word[i].style.display = "none";
				}
				num[12].style.display = "none";
				word[12].style.display = "block";
			}

			if( scrTop < 500 || scrTop >= 7100 ){
				left_fix.style.display = "none";
			}
		}

		for (var i = 0; i < fix_list.length; i++) {
			onMouseHover( i );
			onMouseOut( i );
		};

		function onMouseHover( vals ){
			fix_list[vals].onmouseover = function(){
				 num[vals].style.display = "none";
				 word[vals].style.display = "block";
			}
		}
		function onMouseOut( vals ){
			fix_list[vals].onmouseout = function(){
				 num[vals].style.display = "block";
				 word[vals].style.display = "none";
			}
		}

		
	</script>
</body>
</html>